
import { useEffect, useState } from 'react';
import { Pagination, Table } from '@arco-design/web-react';
import router from 'next/router';
import api from '../../../atoms/api';
import GetData from '../../../atoms/getdata';
import MainContainer from '../../../components/maincontainer';
import TableContainer from '../../../components/list/tablecontainer';
import Search from '../../../components/list/search';
import { Query as Q1, Result as R1 } from '../../api/basicinformation/curriculumproject/query.api';
import { Query as Q2, Result as R2 } from '../../api/basicinformation/curriculumproject/delete.api';
import Confirm from '../../../atoms/confirm';
import DeleteData from '../../../atoms/deletedata';
import Messagetip from '../../../atoms/messagetip';
import FormData from './formdata';



export default function Content({ contition }: { contition: Q1 }) {
	//查询条件
	const [query, setQuery] = useState<Q1>(contition);
	// 查询返回数据
	const [dataSource, setDataSource] = useState<R1>({
		count: 0,
		data: []
	});
	//查询
	async function SearchData(q: Q1) {
		setQuery(q);
		const d = await GetData<R1, Q1>(api['/api/basicinformation/curriculumproject/query'], 'get', q);
		setDataSource(d);
	}
	//新增/详情
	const [inputData, setInputData] = useState(false);
	const [id, setId] = useState('');
	//执行
	useEffect(() => {
		(async () => {
			await SearchData(query);
		})();
	}, []);
	return <>
		<MainContainer>
			{/* 查询 */}
			<Search
				onSearch={(v) => {
					const q = {
						q: v,
						page: query.page || '1',
						pagesize: query.pagesize || '10'
					} as Q1;
					setQuery(q);
					SearchData(q);
				}}
				onAdd={() => {
					setInputData(true);
					setId('');
				}} />
			{/* 列表 */}
			<TableContainer>
				<Table data={dataSource.data} border borderCell
					rowKey={(r) => {
						return r.project_id;
					}}
					columns={[
						{
							key: 'project_id',
							title: '团队编号',
							dataIndex: 'project_id',
							align: 'center',
							width: '5.3125rem',
							sorter: (a, b) => { return a.project_id.localeCompare(b.project_id); },
						},
						{
							key: 'grade',
							title: '届次',
							dataIndex: 'grade',
							align: 'center',
							width: '6.25rem',
							sorter: (a, b) => { return a.grade.localeCompare(b.grade); },
						},
						{
							key: 'majorname',
							title: '专业',
							dataIndex: 'majorname',
							align: 'center',
							width: '8.625rem',
							sorter: (a, b) => { return a.majorname.localeCompare(b.majorname); },
						},
						{
							key: 'classname',
							title: '班级',
							dataIndex: 'classname',
							align: 'center',
							width: '6rem',
							sorter: (a, b) => { return a.classname.localeCompare(b.classname); },
						},
						{
							key: 'teamname',
							title: '团队名称',
							dataIndex: 'teamname',
							align: 'center',
							width: '12.0625rem',
							sorter: (a, b) => { return a.teamname.localeCompare(b.teamname); },
						},
						{
							key: 'teammate',
							title: '团队组长',
							dataIndex: 'teammate',
							align: 'center',
							width: '6.75rem',
						},
						{
							key: 'projectname',
							title: '项目名称',
							dataIndex: 'projectname',
							align: 'center',
							width: '19.125rem ',
						},
						{
							key: 'op',
							title: '操作',
							dataIndex: 'op',
							align: 'center',
							width: '10rem',
							render: (v, r, i) => {
								return <>
									<span className='tdet' onClick={async () => {
										setInputData(true);
										setId(r.project_id);
									}}>编辑</span>
									<span className='tdel' onClick={async () => {
										if (await Confirm('删除提示', '确认删除该条数据？')) {
											const result = await DeleteData<R2, Q2>(api['/api/basicinformation/curriculumproject/delete'], 'delete', { id: r.project_id });
											if (result.ok) {
												if (await Messagetip('success', '删除成功')) {
													router.reload();
												}
											}
											else {
												Messagetip('error', result.message);
											}
										}
									}}>删除</span>
								</>;
							}
						}
					]}
					pagination={{
						current: Number(query.page || '1'),
						pageSize: Number(query.pagesize || '10'),
						total: dataSource.count,
						onChange: (p, s) => {
							const q = {
								q: query.q || '',
								page: p.toString(),
								pagesize: s.toString()
							} as Q1;
							setQuery(q);
							SearchData(q);
						}
					}}
				/>
			</TableContainer>
			{/* 新增/编辑 */}
			{inputData && <FormData id={id} onClick={async (v) => {
				if (v) {
					//保存成功
					router.reload();
				}
				setInputData(false);
			}
			} />}
			<style jsx>{`
.list{
display: flex;
flex-direction: column;
}
.tdel{
color: #165DFF;
margin-left: 0.5rem;
cursor: pointer;
}
.tdet{
color: #165DFF;
margin-right: 0.5rem;
cursor: pointer;
}
			`}</style>
		</MainContainer>
	</>;
}
